<template>
  <div class="container">
    <div class="app-container">
      <el-card class="box-card">
        <el-row type="flex" justify="space-between">
          <el-col :span="24">
            <el-button size="medium" type="primary" @click="add(null,'add')">添加房产</el-button>
          </el-col>
          <el-col :span="24">
            <el-row type="flex">
              <el-select v-model="category" placeholder="全部分类" @change="searchFn">
                <el-option value="">全部分类</el-option>
                <el-option
                  v-for="item in cateList"
                  :key="item.id"
                  :label="item.title"
                  :value="item.id"
                />
              </el-select>
              <el-select v-model="agent" placeholder="全部经纪" @change="searchFn">
                <el-option value="">全部经纪</el-option>
                <el-option
                  v-for="item in agentList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                />
              </el-select>
              <el-input v-model="title_contains" placeholder="请输入关键字" @change="search">
                <el-button slot="append" @click="search">筛选</el-button>
              </el-input>
            </el-row>
          </el-col>
        </el-row>
        <el-divider />
        <el-table :data="properList" style="width: 100%" border>
          <el-table-column label="封面" prop="image">
            <template v-slot="{row}">
              <el-image :src="row.image" style="width: 100px; height: 100px" />
            </template>
          </el-table-column>
          <el-table-column align="center" label="标题" prop="title" />
          <el-table-column align="center" label="标签" prop="tags" />
          <el-table-column align="center" label="地址" prop="address" />
          <el-table-column align="center" label="分类" prop="category.title" />
          <el-table-column align="center" label="经纪" prop="agent.name" />
          <el-table-column align="center" label="价格" prop="price" />
          <el-table-column align="center" label="介绍" prop="desc" />
          <el-table-column align="center" label="图片" prop="image">
            <template v-slot="{row}">
              <el-row type="flex">
                <el-image v-for="(item,index) in row.photos" :key="index" :src="item" style="width: 100px; height: 100px" />
              </el-row>
            </template>
          </el-table-column>
          <el-table-column align="center" label="操作">
            <template v-slot="{row}">
              <el-button size="mini" plain type="primary" @click="edit(row.id,'edit')">编辑</el-button>
              <el-button size="mini" plain type="danger" @click="del(row.id)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-divider />
        <!-- 分页器 -->
        <el-row type="flex" justify="center">
          <el-pagination
            background
            layout="prev, pager, next"
            :total="total"
            @current-change="currentPage"
          />
        </el-row>
      </el-card>
      <!-- 添加、编辑房产弹窗 -->
      <AddDialog :id="id" ref="dialog" :show-dialog.sync="showDialog" :title="title" @updateEvent="allFn" />
    </div>
  </div>

</template>

<script>
import { getAgentsList } from '@/api/agents'
import { getCateList } from '@/api/categories'
import { deleteProper, properCount, propertiesList } from '@/api/properties'
import AddDialog from './components/AddDialog.vue'
export default {
  components: { AddDialog },
  data() {
    return {
      id: null, // 用户点击某条数据的id
      properList: [], // 房产列表
      limit: 2, // 每页的获取条数
      start: 0, // 开始获取的位置
      title_contains: '', // 模糊搜索标题
      agent: null, // 筛选相关经纪, 传入经纪 id
      category: null, // 筛选相关分类，传入分类id
      showDialog: false, // 控制弹窗显示
      total: 1, // 房产总数量
      openTitle: '', // 弹窗标题
      agentList: '', // 经纪人列表
      cateList: '' // 分类列表
    }
  },
  computed: {
    title() {
      if (this.openTitle === 'add') {
        return '添加房产'
      } else {
        return '编辑房产'
      }
    }
  },
  async created() {
    this.allFn()
    // 获取经纪人列表
    const res = await getAgentsList()
    this.agentList = res.data
    // 获取分类列表
    const res1 = await getCateList()
    this.cateList = res1.data
  },
  methods: {
    allFn() {
      this.getProperList() // 房产管理列表
      this.getProperCount() // 房产数量
    },
    async getProperList() { // 获取房产管理列表
      const res = await propertiesList({
        _limit: this.limit,
        _start: this.start,
        title_contains: this.title_contains || [],
        agent: this.agent || null,
        category: this.category || null
      })
      this.properList = res.data
    },
    async getProperCount() { // 获取房产数量
      const res = await properCount({
        title_contains: this.title_contains || [],
        agent: this.agent || null,
        category: this.category || null
      })
      this.total = res.data * 5
    },
    async currentPage(val) { // 点击分页实现功能
      this.start = (val - 1) * this.limit
      await this.getProperList()
    },
    add(id, txt) { // 添加
      this.openTitle = txt
      this.showDialog = true
    },
    searchFn() { // 经纪人搜索
      this.allFn()
    },
    search() { // 关键字模糊搜索
      this.allFn()
    },
    async edit(id, txt) { // 数据回显
      this.id = id
      this.openTitle = txt
      this.showDialog = true
      this.$refs.dialog.getProperDetails()
    },
    async del(id) { // 删除房产
      await deleteProper(id)
      this.$message.success('删除成功')
      // 刷新列表
      this.allFn()
    }
  }
}
</script>

<style lang="scss" scoped>
.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>
